﻿@page "/admin/settings/custom-menu"
@Html.AntiForgeryToken()
@{
    var bc = BlogConfig.CustomMenuSettings;
    var settings = new CustomMenuSettingsJsonModel
            {
                IsEnabled = bc.IsEnabled,
                MenuJson = bc.Menus.ToJson(true)
            };
}

@section scripts{
    <script type="text/javascript" src="https://unpkg.com/monaco-editor@latest/min/vs/loader.js"></script>
    <script>
        require.config({ paths: { 'vs': 'https://unpkg.com/monaco-editor@latest/min/vs' } });
        // Before loading vs/editor/editor.main, define a global MonacoEnvironment that overwrites
        // the default worker url location (used when creating WebWorkers). The problem here is that
        // HTML5 does not allow cross-domain web workers, so we need to proxy the instantiation of
        // a web worker through a same-domain script
        window.MonacoEnvironment = {
            getWorkerUrl: function (workerId, label) {
                return `data:text/javascript;charset=utf-8,${encodeURIComponent(`
                                        self.MonacoEnvironment = {
                                          baseUrl: 'https://unpkg.com/monaco-editor@latest/min/'
                                        };
                                        importScripts('https://unpkg.com/monaco-editor@latest/min/vs/base/worker/workerMain.js');`
                )}`;
            }
        };

        var jsonContentEditor = null;

        require(['vs/editor/editor.main'], function () {
            initJsonEditor();
        });

        var initJsonEditor = function () {
            var jsonContentEditorDiv = document.getElementById('JsonContentEditor');
            jsonContentEditor = monaco.editor.create(jsonContentEditorDiv, {
                language: 'json'
            });
            jsonContentEditor.layout();

            var jsonValue = document.querySelector("#settings_MenuJson").value;
            window.jsonContentEditor.setValue(jsonValue);
        }

        var assignEditorValues = function () {
            var jsonValue = window.jsonContentEditor.getValue();
            document.querySelector("#settings_MenuJson").value = jsonValue;
        }

        var clearMenus = function () {
            window.jsonContentEditor.setValue("[]");
            document.querySelector("#settings_MenuJson").value = "[]";
        }
    </script>
    <script type="module">
        import * as settings from '/js/app/admin.settings.module.js';

        function handleSubmit(event) {
            assignEditorValues();
            settings.handleSettingsSubmit(event);
        }

        const form = document.querySelector('#form-settings');
        form.addEventListener('submit', handleSubmit);
    </script>
}

@section head{
    <style>
        .monaco-target {
            border: 1px solid #dee2e6;
            width: 100%;
            min-height: 560px;
        }
    </style>
}

<div class="admin-toolbar ps-4 pe-4 pt-2 pb-2 border-bottom mb-3 shadow-sm">
    <a href="javascript:window.clearMenus();" class="btn btn-outline-danger btn-delete-selected">
        <i class="bi-trash"></i> @SharedLocalizer["Clear menus"]
    </a>
</div>

<div class="ps-4 pe-4">
    <div class="row">
        <div class="col-8">
            <form id="form-settings" asp-controller="Settings" asp-action="CustomMenu">
                <div class="form-check form-switch mb-3">
                    <input type="hidden" name="IsEnabled" value="false">
                    <input type="checkbox" name="IsEnabled" value="true" class="form-check-input" @(settings.IsEnabled ? "checked" : null)>
                    <label asp-for="@settings.IsEnabled" class="form-check-label"></label>
                </div>

                <div id="JsonContentEditor" class="monaco-target">
                </div>
                <textarea asp-for="@settings.MenuJson" class="settings-jsoncontent-textarea d-none"></textarea>

                <div class="mt-3">
                    <button type="submit" class="btn btn-outline-accent" id="btn-save-settings">
                        @SharedLocalizer["Save"]
                    </button>
                </div>
            </form>
        </div>
        <div class="col-4">
            <div class="card bg-light">
                <div class="card-body">
                    <h5 class="card-title">Example</h5>
<pre>
<code>
[
  {
    "Title": "Apps",
    "Url": "",
    "Icon": "bi-app",
    "DisplayOrder": 1,
    "IsOpenInNewTab": false,
    "SubMenus": [
        {
            "Title": "CIDR Calculator",
            "Url": "https://cidrcalc.blazor.edi.wang/",
            "IsOpenInNewTab": true
        },
        {
            "Title": "大写人民币转换",
            "Url": "https://rmbcap.blazor.edi.wang/",
            "IsOpenInNewTab": true
        }
    ]
  },
  {
    "Title": "About",
    "Url": "/page/about",
    "Icon": "bi-star",
    "DisplayOrder": 2,
    "IsOpenInNewTab": false,
    "SubMenus": []
  }
]
</code>
</pre>
                    
                </div>
            </div>
        </div>
    </div>
</div>